<script setup lang="ts">
import { getTopRatedMovies, getMovieOnInfoList, getMoreComingList } from '@/api/index'
import router from '@/router';
import { ref, onMounted, nextTick } from 'vue';

// 最受好评的电影
const bestMovie = ref(null)
getTopRatedMovies().then(res => {
    // console.log(res.data);
    bestMovie.value = res.data
})
// 热映列表
const movieOnInfoList = ref([])
// 当前展示的电影id
const listlength = ref(0)
const movieIds = ref(null)

getMovieOnInfoList().then(res => {
    console.log(res.data);
    movieOnInfoList.value = res.data.movieList
    listlength.value = res.data.movieList.length
    movieIds.value = res.data.movieIds
    movieOnInfoList.value = res.data.movieList.map(item=>{
         return {...item,img:item.img.split('?')[0]+"?imageView2/1/w/128/h/180"}
    })
    console.log(movieOnInfoList.value);
})

// 更多热映
const loading = ref(false);
const finished = ref(false);
onMounted(() => {
    // 使用 nextTick 确保组件渲染完成后再改变 loading 状态
    nextTick(() => {
        loading.value = false;  // 设置为 false，允许触发加载操作
    });
});

const onLoad = () => {
    // 异步更新数据
    loading.value = true; // 开始加载数据
    // 获取下一批电影ID
    const nextMovieIds = movieIds.value?.slice(listlength.value, listlength.value + 10);
    listlength.value = listlength.value + 10
    
    getMoreComingList(nextMovieIds).then(res => {
        movieOnInfoList.value = [...movieOnInfoList.value, ...res.data.coming]

        loading.value = false;
        // 如果已经加载完所有数据
        if (listlength.value >= movieIds.value?.length) {
            finished.value = true;
        }
    });
};

// 跳转到电影详情页
const film = (movie) => {
    router.push({
        path: '/fil',
        query: {
            movieId: movie.id
        }
    })
}
const milf = (movie) => {
    router.push({
        path: '/fil',
        query: {
            movieId: movie.movieId
        }
    })
}

</script>

<template>
    <!-- 首页最受好评的电影 -->
    <div v-if="bestMovie" class="bestMovies">
        <p style="font-size: 14rem;color: #333;margin: 0 0 12rem;padding-left: 6rem;">{{ bestMovie.title }}</p>
        <div class="movies">
            <div @click="milf(movie)" class="movieItem" v-for="movie in bestMovie?.movieList" :key="movie.movieId">
                <div class="image">
                    <van-image width="85rem" height="115rem" fit="cover" :src="movie?.poster" />
                    <div class="wish score" v-if="movie.wish">{{ movie.wish }}人想看</div>
                    <p class="wish score" v-else>观众评{{ movie.score }}</p>
                </div>
                <p class="name text-ellipsis">{{ movie.name }}</p>
                <p v-if="movie.comingTitle" class="text-ellipsis">{{ movie.comingTitle }}</p>
            </div>
        </div>
    </div>

    <!-- 首页热映 -->
    <van-list v-model:loading="loading" :offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="HotList" v-if="movieOnInfoList">
            <div @click="film(movie)" v-for="movie in movieOnInfoList" :key="movie.id" class="listItem">
                <div>
                    <van-image :src="movie.img" width="68rem" height="113rem" fit="cover"  />
                </div>
                <!-- mageView2/1/w/128/h/180 -->
                <div class="content">
                    <h3 class="text-ellipsis">{{ movie.nm }}</h3>
                    <p v-if="movie.sc">观众评<span class="score">{{ movie.sc }}</span></p>
                    <p v-else><span>暂无评分</span></p>
                    <p class="text-ellipsis">主演:{{ movie.star }}</p>
                    <p class="text-ellipsis">{{ movie.showInfo }}</p>
                </div>
                <div>
                    <div class="btn" :style="{
                        background: movie.showStateButton?.color, boxShadow: movie.showStateButton?.shadowColor
                    }">
                        {{ movie.showStateButton?.content }}
                    </div>
                </div>
            </div>
        </div>
    </van-list>

</template>
<style lang="less" scoped>
.bestMovies {
    padding: 12rem 0 0;
    margin-bottom: 12rem;
    background-color: #fff;

    .movies {
        width: 100vw;
        overflow: scroll;
        display: flex;
        align-items: center;

        .movieItem {
            margin: 4rem;
            width: 85rem;
            padding-bottom: 12rem;

            .image {
                position: relative;

                .wish {
                    font-weight: 700;
                    color: #faaf00;
                    font-size: 12rem;
                    margin-left: 4rem;
                    position: absolute;
                    bottom: 4rem;
                    text-align: center;
                }
            }

            .name {
                font-size: 13px;
                font-weight: 600;
            }
        }

        &::-webkit-scrollbar {
            display: none;
        }

        p {
            font-size: 13rem;
            color: #666;
            margin: 0;
            margin-top: 6rem;
        }


    }
}

.HotList {
    background-color: #fff;
    padding: 12rem;

    .listItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8rem 0;
        border-bottom: 1px solid #00000018;

        .content {
            width: 60%;

            h3 {
                font-size: 17rem;
                color: #333;
                font-weight: 700;
                margin: 6rem 0;
            }

            p {
                font-size: 13rem;
                color: #666;
                margin: 0;
                margin-top: 6rem;

                .score {
                    font-weight: 700;
                    color: #faaf00;
                    font-size: 15rem;
                    margin-left: 4rem;
                }
            }
        }

        .btn {
            width: 54rem;
            height: 28rem;
            color: #fff;
            font-weight: 500;
            cursor: pointer;
            border-radius: 16rem;
            font-size: 13rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}


// 单行文本溢出
.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

// vant组件样式
.van-tabs__line {
    background: #e54847;
}
</style>